<template>
    <view>
        <u-list v-if="type == 1">
            <u-list-item v-for="(item, index) in provincesList" :key="index">
                <u-cell @click="clickProvinces(item)" :title="item.name" :isLink="true"></u-cell>
            </u-list-item>
        </u-list>
        <u-list v-if="type == 2">
            <u-list-item v-for="(item, index) in citiesList" :key="index">
                <u-cell @click="clickCities(item)" :title="item.name" :isLink="true"></u-cell>
            </u-list-item>
        </u-list>
        <u-transition :show="show" mode="slide-right">
            <u-list v-if="type == 3">
                <u-list-item v-for="(item, index) in areasList" :key="index">
                    <u-cell @click="clickAreas(item)" :title="item.name"></u-cell>
                </u-list-item>
            </u-list>
        </u-transition>
    </view>
</template>

<script>
export default {
    data() {
        return {
            show: false,
            // 省份列表
            provincesList: [],
            citiesList: [],
            areasList: [],
            type: 1,
            queryData: {
                id: null,
                pCode: null,
                type: '',
                level: 1,
                pageNum:1,
                pageSize: 5000
            },
            saveData: {
                localProvince: {},
                localCity: {},
                localCounty: {}
            },

        }
    },
    onLoad() {
        this.getprovinces()
    },
    methods: {
        // 获取省份列表
		getprovinces() {
		    this.$http.get('/divisions/list/provinces', {pageNum:1, pageSize: 5000}).then(res => {
                console.log(res)
				if (res.code == 200) {
                    this.provincesList = res.rows
				} 
			})
		},
        // 获取市列表
		getcities() {
            uni.showLoading({
                title: '加载中'
            });
		    this.$http.get('/divisions/list/cities', this.queryData).then(res => {
                // console.log(res)
				if (res.code == 200) {
                    this.type = 2
                    this.citiesList = res.rows
                    uni.hideLoading();
				} else {
                    uni.hideLoading();
                }
			})
		},
        // 获取区列表
		getareas() {
            uni.showLoading({
                title: '加载中'
            });
		    this.$http.get('/divisions/list/areas', this.queryData).then(res => {
                // console.log(res)
				if (res.code == 200) {
                    this.type = 3
                    this.show = true
                    this.areasList = res.rows
                    uni.hideLoading();
				} 
			})
		},
        clickProvinces(item) {
            this.queryData.id = item.code
            this.queryData.pCode = item.code
            this.queryData.type = 'cities'
            this.queryData.level = 2

            this.saveData.localProvince = {
                code: item.code,
                name: item.name
            }
            this.getcities()
        },
        clickCities(item) {
            this.queryData.id = item.code
            this.queryData.pCode = item.code
            this.queryData.type = 'areas'
            this.queryData.level = 3

            this.saveData.localCity = {
                code: item.code,
                name: item.name
            }
            this.getareas()
        },
        clickAreas(item) {
            this.saveData.localCounty = {
                code: item.code,
                name: item.name
            }
            // this.saveData.localArea = item.pcode
            const eventChannel = this.getOpenerEventChannel();
            eventChannel.emit('someEvent', {data: this.saveData});
            uni.navigateBack()
        }
    }
}
</script>

<style lang="scss" scoped></style>